<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("p").wrap("<div></div>");
				});
				$("#btn2").click(function() {
					$("p").unwrap();
				});
				$("#btn3").click(function() {
					$("p").wrapAll("<div></div>");
				});
				$("#btn4").click(function() {
					$("p").wrapInner("<b></b>");
				});
			});
		</script>
		<style>
			div {
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<button id="btn1">在 p 元素上使用 div 元素包裹它</button>
		<button id="btn2">去掉 div 元素</button>
		<button id="btn3">给所有p元素包装一个div元素</button>
		<button id="btn4">在每个p元素的内容上包装一个b元素</button>
	</body>

</html>